<template>
    <div class="search">
        <!-- 搜索框 -->
        <div class="d-flex mt-3 saerch-top">
            <svg class="icon" aria-hidden="true" @click="backHome">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <input
                type="text"
                placeholder="陈奕迅"
                class="flex-1 ipt ml-3"
                v-model="keyWord"
                @keyup.enter="search"
            />
        </div>
        <!-- 搜索 历史 -->
        <div class="search-history d-flex jc-between ai-center">
            <div class="d-flex">
                <div class="ml-3" style="font-weight: 700">历史</div>
            </div>
            <div class="flex-1 ml-3">
                <span
                    class="info ml-2 mt-3"
                    v-for="(item, i) in keyWordList"
                    :key="i"
                    @click="fetch(item)"
                    >{{ item }}</span
                >
            </div>
            <div class="mr-2" @click="clear">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-changyonggoupiaorenshanchu"></use>
                </svg>
            </div>
        </div>

        <!-- 展示栏 -->
        <div>
            <div class="itemList">
                <div class="item ml-2" v-for="(item, i) in songList" :key="i">
                    <div class="itemLeft" @click="playMusic(i)">
                        <span class="leftSpan">{{ i + 1 }}</span>
                        <div class="d-flex ai-center">
                            <div class="d-flex ai-center ml-3">
                                <div class="d-flex flex-column">
                                    <p>{{ item.name }}</p>
                                    <div>
                                        <span
                                            v-for="(item1, index) in item.ar"
                                            :key="index"
                                            >{{ item1.name }}|</span
                                        >
                                    </div>
                                </div>
                                <svg
                                    class="icon bofang pr-1"
                                    aria-hidden="true"
                                    v-if="item.fee === 1"
                                >
                                    <use xlink:href="#icon-tipvip"></use>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="itemRight mr-3">
                        <svg
                            class="icon bofang"
                            aria-hidden="true"
                            v-if="item.mv != 0"
                        >
                            <use xlink:href="#icon-MV"></use>
                        </svg>
                        <svg class="icon liebiao" aria-hidden="true">
                            <use xlink:href="#icon-caidan"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import service from "@/request/index.js";
import { mapMutations, mapState } from "vuex";
export default {
    name: "Search",
    data() {
        return {
            keyWord: "",
            keyWordList: [],
            songList: [],
        };
    },
    components: {},
    computed: {
        ...mapState(["playList"]),
    },
    methods: {
        search() {
            if (this.keyWord.trim() === "") {
                return alert("请输入关键词!!");
            }

            // console.log(11);
            // 去重
            const newKeys = this.keyWordList.filter((value, index) => {
                return value != this.keyWord;
                // console.log("@@@",this.keyWordList);
            });
            // console.log([newKeys]);
            this.keyWordList = newKeys;

            //保存到本地存储
            this.keyWordList.unshift(this.keyWord);
            // console.log(this.keyWordList);
            localStorage.setItem(
                "keyWordList",
                JSON.stringify(this.keyWordList)
            );

            //发送 搜索数据 请求
            this.fetch(this.keyWord);

            //清空input
            this.keyWord = "";
        },

        //发送请求 保持数据
        async fetch(kw) {
            //发送送请求
            const res = await service.get(`/cloudsearch?keywords=${kw}`);
            console.log(res);
            // console.log(JSON.parse(res.data.result));
            this.songList = res.data.result.songs;
        },

        //删除功能
        clear() {
            this.keyWordList.splice(this.keyWordList.length - 1, 1);
            localStorage.setItem("keyWordList", JSON.stringify([]));
        },

        //返回
        backHome() {
            this.$router.go(-1);
        },

        //添加搜索的歌曲到 播发列表
        playMusic(i) {
            // console.log(this.songList[i]);
            const newMusic = this.songList[i];
            // console.log([this.songList[i]]);

            //改变 数组结构 为我们在vuex定义的
            const newMusicS = {
                //播发列表
                al: {
                    id: newMusic.id,
                    name: newMusic.name,
                    pic: newMusic.al.pic,
                    picUrl: newMusic.al.picUrl,
                    pic_str: newMusic.al.pic_str,
                },
                ar: newMusic.ar,
                name: newMusic.name,
                id: newMusic.id,
            };
            console.log(newMusicS);
            //添加 歌曲到播发列表
            this.ADDPLAYLIST(newMusicS);
            //改变 播发的歌曲 为我们刚刚添加进去的
            this.UPDATEPLAYLISTINDEX(this.playList.length - 1);
            // 改变 播发状态
            this.UPDATEISPLAY(true);
        },
        ...mapMutations(["ADDPLAYLIST", "UPDATEPLAYLISTINDEX", "UPDATEISPLAY"]),
    },
    mounted() {
        // 没有则赋值空数组  数据类型相应很重要
        this.keyWordList =
            JSON.parse(localStorage.getItem("keyWordList")) || [];
        // console.log(localStorage.getItem("keyWordList"));
    },
};
</script>

<style lang="less" scoped>
.search {
    .saerch-top {
        .ipt {
            border: none;
            border-bottom: 1px solid #666666;
        }
    }
    .search-history {
        height: 1.6rem;
        .info {
            display: inline-block;
            background-color: #b9a9a9;
            height: 0.6rem;
            width: 1.3rem;
            text-align: center;
            line-height: 0.6rem;
            border-radius: 0.3rem;
        }
    }
    .itemList {
        width: 100%;
        .item {
            width: 100%;
            height: 1.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .itemLeft {
                width: 85%;
                height: 100%;
                display: flex;
                align-items: center;
                .leftSpan {
                    display: inline-block;
                    width: 0.2rem;
                    text-align: center;
                }
                div {
                    p {
                        width: 4.54rem;
                        height: 0.4rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-weight: 700;
                    }
                    span {
                        font-weight: 400;
                        font-size: 0.24rem;
                        color: #999;
                    }
                }
            }
            .itemRight {
                width: 20%;
                height: 100%;
                display: flex;
                // justify-content: space-between;
                align-items: center;
                position: relative;
                .icon {
                    fill: #999;
                }
                .bofang {
                    position: absolute;
                    left: 0;
                }
                .liebiao {
                    position: absolute;
                    right: 0;
                }
            }
        }
    }
}
</style>